<template>
    <div class="cssAll">
        <div class="first">
                <br>
                <div class="two">
                    {{listImgName}}
                </div>
                <br>
                <div class="three">
                    {{listImgRemark}}
                </div>
        
         </div>
         <br>
        <div class="four">
            <div class="five">
                类型：
                <div  class="six">
                <el-button color="#f93684" :plain="false" class="aaa" >全部</el-button>
                <el-button color="#f93684"  plain class="aaa">视频课</el-button>
                <el-button color="#f93684"  plain class="aaa">线下课</el-button>
                <el-button color="#f93684"  plain class="aaa">直播课</el-button>
            </div>
            </div>  
        </div>
        <br>
        <div class="seven">
            <div class="eight">
                <el-button text class="bbb">综合排序</el-button>
                <el-button text class="bbb">销量</el-button>
                <el-button text class="bbb">浏览量</el-button>
                <el-button text class="bbb">价格</el-button>
                <el-button text class="bbb">发布时间</el-button>
            </div>
        </div>
        <a href="https://www.dance365.com/detail/video_course?momentId=68fa1d4cc499436bb0fbdf7f1febb0e1&source=activity_zone&resourceId=ff80808176f5683b0176f9ae53656bd9">
        <Video :videosList="videoStore.videosList"></Video>
        </a>
    </div>

</template>

<script setup lang="ts">

    import {ref,onMounted} from 'vue'
    import getThemeDetails from '@/api/themeDetails'
    import Video from "@/components/Video.vue"
    import {useVideoStore} from "@/store/video";
    const videoStore = useVideoStore()
    const filterInfo = ref([]) // 搜索接口入参
    const pageSize = ref(20)
    const pageNum = ref(0)
    const tagIndex = ref(1)
    const token = ref('c494ae44-3adc-48ca-8749-5128a53358d7')
    const getVideoList = ()=>{
      videoStore.getSort(tagIndex.value,token.value,pageSize.value,pageNum.value, {filterInfo:filterInfo.value})
    }
    let listImg=ref<any>();
    let listImgName=ref<any>()
    let listImgRemark=ref<any>()

    onMounted(() => {
        getPage();
        getVideoList();
    })

    const getPage = async () => {
         try {
                let list = (await getThemeDetails.getThemeDetails()) as any;
                listImgName.value=list.name
                listImgRemark.value=list.remark
                listImg.value=list

        } catch (error) {
                 console.log(2222)
        }
    }



</script>

<style scoped>
.cssAll{
  width: 1200px;

  margin:0 auto;
  justify-content: center;

}
.first {
    width: 1200px;
    height: 160px;
    margin:0 auto;
    background-color:#ffffff;
    justify-content: center;
    /* border-color: green; */
}
.two{
    
    margin-left:40px;
    margin-top:10px;
    font-weight:800;
    font-size:20px;
    color:#111111;
}
.three{
    margin-left:40px;
    font-size:14px;
    color:#111111;
}
.four{
    width: 1200px;
    height: 90px;
    margin:0 auto;
    background-color:#ffffff;
    justify-content: center;
}
.five{
    width:100px;
    height:10px;
    margin-left:40px;
    margin-top:10px;
    padding:40px 0;
    color:#B1B5C1;
}
.six{
    width:600px;
    height:40px;
    margin-left:100px;
    margin-top:-25px;
   
}
.aaa{
    margin-right:20px; 
    color:#111111;
    border:#ffffff
    
}
.seven{
    width: 1200px;
    height: 70px;
    margin:0 auto;
    background-color:#ffffff;
    justify-content: center;
}
.eight{
    width:600px;
    height:60px;
    margin-left:20px;
    margin-top:20px;
    padding-top:20px;
}
.bbb{
    margin-right:20px; 
    color:#757374;
    border:#ffffff;
}
.bbb:hover{
    color:red;
}
</style>